<template>
	<view class="main">
		<!-- <u-sticky style="top: 0;" bgColor="#fff"> -->
			<u-tabs :list="tabList" :is-scroll="false" :current="current" @click="onTabClick"
			activeStyle="color:#3c9cff;font-weight: bold;" lineColor="#3c9cff"
			lineWidth="50" itemStyle="padding-left: 1%; padding-right: 1%; height: 80rpx;width:48.5%;background-color: #ffffffcc;border-right: 1px solid #ededed;"
			style="width: 100%;"></u-tabs>
		<!-- </u-sticky> -->

		<swiper class="swiper-box"
			:current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">

					 <view class="notice-list">
					 	<view v-for="(item, index) of noticeList" :key="index" class="notice-item" @click="toDetail(item.Id)">
					 		<view class="notice-item-head">
					 			<view class="notice-item-head-text">{{item.SourceSys }}</view>
					 			<view class="notice-item-head-date">发送时间: {{formattedCreateDate(item.CreateDate)}}</view>
					 		</view>
					 		<view class="notice-item-content">
					 			<view class="title">{{item.Title}}</view>
					 			<view class="content">{{$filters.extractString(item.Content,90)}}</view>
					 			<view class="arrow-right" @click="toDetail(item.Id)">详情&gt;&gt;</view>
					 		</view>

					 	</view>

						<view class="u-empty" v-if="noticeList.length<1">
							<uni-icons type="list" size="28"></uni-icons>
							<text class="u-empty__text">暂无消息</text>
						</view>
						
					 </view>
				</scroll-view>
			</swiper-item>

			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">

					 <view class="notice-list">
					 	<view v-for="(item, index) of noticePushList" :key="index" class="notice-item" @click="toDetail(item.Id)">
					 		<view class="notice-item-head">
					 			<view class="notice-item-head-text">{{item.Title}}</view>
					 			<view class="notice-item-head-date">发送时间: {{formattedCreateDate(item.ModifyDate)}}</view>
					 		</view>
					 		<view class="notice-item-content">
					 			<view class="content">
									<rich-text :nodes="decodeURIComponent(item.Content)"></rich-text>

								</view>
					 			<view class="arrow-right" @click="toDetail(item.Id)">详情&gt;&gt;</view>
					 		</view>

					 	</view>

						<view class="u-empty" v-if="noticePushList.length<1">
							<uni-icons type="list" size="28"></uni-icons>
							<text class="u-empty__text">暂无通知公告</text>
						</view>
						
					 </view>
				</scroll-view>
			</swiper-item>

		</swiper>

	</view>
</template>

<script>
	import {
		queryToDoList,updateStatus
	} from '@/common/services/ToDoWebSvr.js';

	export default {
        computed: {
            // 计算属性格式化日期
            formattedCreateDate() {
                // 使用filters.formatDate过滤器
                return (date) => this.$filters.formatDate(date, 1);
            }
        },
		data() {
			return {
				tabList: [
					{
						index:0,
						name: '待办列表',
						value: '0',
					},
					{
						index:1,
						name: '已办列表',
						value: '1',
					},
				],
				noticePushList: [],
				noticeList: [],
				current: 0,
				swiperCurrent:0,
				pageIndex: 1,
				pageSize: 15,
				notpageIndex: 1,
				notpageSize: 15,
			};
		},
		created() {
			// 查
			this.queryToDoList()
			// 查
			this.queryToDoList1();
		},
		onUnload() {
		  console.log('页面被卸载了，可能是返回操作导致的');
		  // 执行某些操作
		},
		onBackPress(options) {
			console.log(' onBackPress=====',options);
			// options.from 表示返回的来源
			if (options.from === 'backbutton') {
				console.log('物理返回键或导航栏的返回按钮被点击');
			} else if (options.from === 'navigateBack') {
				console.log(' uni.navigateBack 被调用');
			}
			// 返回 true 阻止默认返回行为，返回 false 或不返回则执行默认行为
			return true;
		},
		destroyed() {},
		mounted() {
			// 添加对 popstate 事件的监听
			window.addEventListener('beforeunload', this.onBack);
			uni.$on('onBack', this.onBack);
		},
		methods: {
			onBack() {
				console.log('浏览器返回按钮被点击');
				// 在这里执行你的返回逻辑，比如提示用户、保存数据等
			},
			// 查待办事项
			queryToDoList(){
				queryToDoList({token: uni.getStorageSync(setting.STORAGE_KEY+'token'),
				title:'', content:'', status:0, sysCode:'', tags:'APP', createTimeStart:'', createTimeEnd:'',
				limitTimeStart:'',limitTimeEnd:'',level:'',type:'',pageNum:this.pageIndex,pageSize:this.pageSize
				})
				.then((res) => {
					console.log("查待办事项==0========"+JSON.stringify(res))
					if(res._Items.length>0){
						this.noticeList = res._Items;
					}else{
						this.noticeList = [];
					}

				})
				.catch(err => {
					console.error(err)
				}).finally(()=>{
					uni.hideLoading();
				})
			},
			// 查已办
			queryToDoList1(){
				queryToDoList({token: uni.getStorageSync(setting.STORAGE_KEY+'token'),
				title:'', content:'', status:1, sysCode:'', tags:'APP', createTimeStart:'', createTimeEnd:'',
				limitTimeStart:'',limitTimeEnd:'',level:'',type:'',pageNum:this.notpageIndex,pageSize:this.notpageSize
				})
				.then((res) => {
					console.log("查待办事项===1======="+JSON.stringify(res))
					if(res._Items.length>0){
						this.noticePushList = res._Items;
					}else{
						this.noticePushList = [];
					}
				})
				.catch(err => {
					console.error(err)
				}).finally(()=>{
					uni.hideLoading();
				})
			},
			todecodeURIComponent(str){
				return decodeURIComponent(str);
			},
			// tab 切换
			onTabClick(item) {
				this.current = item.index;
				this.swiperCurrent = item.index;
				if(this.current === 0){
					this.queryToDoList()
				}
				else{
					this.queryToDoList1();
				}
			},

			transition(e) {
			},
			animationfinish(e) {
				let current = e.detail.current;
				this.swiperCurrent = current;
				this.current = current;
			},
			// 上划加载更多
			reachBottom() {
				// 加载更多数据
				if(this.current === 0){
					this.pageIndex++;
					this.queryToDoList()
				}
				else if(this.current === 1){
					this.notpageIndex ++;
					this.queryToDoList1();
				}
			},
			// 详情
			toDetail(id){
				uni.showToast({
					title: "跳转到业务系统处理....",
					duration: 3500,
					icon: 'none',
					success: (result) => {
					}
				});
				// const url = setting.WEBURL+"pages/todo/todo-detail?guid="+id;
				// this.$webViewUtil.goToPage("navigateTo", url, '',1,'事项详情');
			}

		},
		components: {
		},
	};
</script>

<style scoped lang="less">
	.main {
		height: 100vh;
		// overflow: scroll;
		background: #e9ebf8;

		.tab {
			// padding-top: 20rpx;
			// display: flex;

			&-item {
				flex: 1;
				display: flex;
				justify-content: center;

				&:first-child {
					border-right: 2px solid #aeaeae;
				}

				&-text {
					font-size: 32rpx;

					&.active {
						color: #078DFF;
					}
				}
			}
		}

		.swiper-box{
			height: calc(100vh - 90rpx);
			margin-top: 10rpx;
		}

		.notice {
			&-list {
				padding: 20rpx;
			}

			&-item {
				background-color: #fff;
				display: flex;
				flex-direction: column;
				margin-bottom: 20rpx;
				border-radius: 20rpx;

				&-head {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					border-bottom: 2rpx solid #c6c6c6;
					padding: 16rpx;
					padding-bottom: 10rpx;

					&-text {
						font-size: 30rpx;
					}

					&-date {
						color: #A6A6A6;
						font-size: 24rpx;
						width: 40vw;
					}
				}

				&-content {
					padding: 16rpx;

					.title{
						padding: 12px 8px;
						height: 30px;
						font-weight: bold;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.content {
						color: #959595;
						padding: 12px 8px;
						height: 84px;
						font-size: 24rpx;
						word-break: break-all !important;
						overflow: hidden;
						// white-space: nowrap;
						// text-overflow: ellipsis !important;
						// display: -webkit-box !important;
						// -webkit-line-clamp: 5 !important;
						// -webkit-box-orient: vertical !important;
					}

					.arrow-right {
						text-align: right;
						font-size: 24rpx;
						color: #169BD5;
					}
				}
			}
		}
	}
</style>
